<template>
    <div>
        <InnerBreadcrumb v-model="indexKey" :path="breadPath" :showBack="true" />
        <div class="edu-page-warp" v-show="indexKey == '1'">
          <condition-card @reset="onSearchReset" @search="onSearch" label-width="120px">
            <slot>
              <el-row :gutter="20">
                <el-col :span="8">
                <el-form-item label="学院">
                  <el-select v-model="queryForm.condition.faculty" style="width:100%">
                    <el-option
                      v-for="item in source.collegeList"
                      :key="item.collegeId"
                      :label="item.collegeIdI18n"
                      :value="item.collegeId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
                <el-col :span="8">
                  <el-form-item label="所属职级">
                    <el-select v-model="queryForm.condition.level" style="width:100%">
                      <el-option
                        v-for="item in source.levelList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="性别">
                    <el-select v-model="queryForm.condition.sex" style="width:100%">
                      <el-option
                        v-for="item in source.sexes"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </slot>
          </condition-card>
            <el-card shadow="never">
                <div class="edu-page-title">校内导师管理</div>
                <div class="edu-opertion-bar">
                  <div class="float-left">
                    <el-input
                      v-model="queryForm.condition.code"
                      clearable
                      placeholder="请输入导师姓名、工号搜索"
                      style="width:200px"
                      @keyup.enter.native="onSubmit"
                    >
                      <i
                        slot="suffix"
                        class="el-icon-search"
                        style="margin-top:10px;cursor:pointer"
                        @click="onSubmit"
                      ></i>
                    </el-input>
                  </div>
                    <div class="float-right">
                        <el-button type="default" @click="exportFile()">{{$t('message.export')}}</el-button>
                        <el-button type="primary" @click="addItem">{{$t('message.add')}}</el-button>
                    </div>
                </div>
                <el-table
                    :data="TutorList"
                    size="mini"
                    style="width:100%"
                    @selection-change="handleSelectionChange"
                    tooltip-effect="light"
                >
                    <el-table-column type="selection" stripe />
                    <el-table-column prop="name" label="导师姓名" fixed="left">
                        <template slot-scope="scope">{{ scope.row.name }}</template>
                    </el-table-column>
                    <el-table-column prop="code" label="工号" fixed="left">
                        <template slot-scope="scope">{{ scope.row.code }}</template>
                    </el-table-column>
                    <el-table-column prop="sex" label="性别" fixed="left">
                        <template slot-scope="scope">{{transSex(scope.row.sex)}}</template>
                    </el-table-column>
                    <el-table-column prop="faculty" label="学院" fixed="left">
                        <template slot-scope="scope">{{ scope.row.facultyI18n }}</template>
                    </el-table-column>
                    <el-table-column prop="titleName" label="职称/职务" fixed="left">
                        <template slot-scope="scope">{{ scope.row.titleName }}</template>
                    </el-table-column>
                    <el-table-column prop="level" label="所属职级" fixed="left">
                        <template slot-scope="scope">{{scope.row.level}}</template>
                    </el-table-column>
                    <el-table-column :label="$t('label.operation')" fixed="right">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                size="mini"
                                @click="deleteRecord(scope.row.code)"
                            >{{$t("message.delete")}}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="edu-pagination">
                    <div class="float-right">
                        <el-pagination
                            :current-page="queryForm.pageNum_"
                            :page-sizes="[20,50,100,500,1000]"
                            :page-size="queryForm.pageSize_"
                            :total="queryForm.total"
                            layout="total, sizes, prev, pager, next, jumper"
                            style="float: right;margin:10px 60px 0 0;"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                        />
                    </div>
                </div>
            </el-card>
        </div>
        <div v-show="indexKey == '2'">
            <condition-card @reset="reset" @search="searchTeacher" label-width="120px">
                <slot>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="学院">
                                <el-select v-model="query.condition.faculty" style="width:100%">
                                    <el-option
                                        v-for="item in source.collegeList"
                                        :key="item.collegeId"
                                        :label="item.collegeIdI18n"
                                        :value="item.collegeId"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="所属职级">
                                <el-select v-model="query.condition.level" style="width:100%">
                                    <el-option
                                        v-for="item in source.levelList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="导师姓名或工号">
                                <el-input v-model="query.condition.name" style="width:100%" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </slot>
            </condition-card>
            <div class="margin-top-16 auth-root-box">
                <tutorSelect
                    leftTitle="待选导师"
                    rightTitle="已选导师"
                    ref="allDeptsTree"
                    leftChecked
                    rightChecked
                    :class="clearState ? 'hidedenCheck' : ''"
                    :rightEduTransfer="true"
                    :leftTransferData="leftTransferData"
                    :rightTransferData="rightTransferData"
                    v-on="{addNodesToRight:pickAuthorities,delNodesFromRight:unpickAuthorities}"
                />
            </div>
            <div style="float: right;">
                <el-button @click="resetSelect">{{$t('message.reset')}}</el-button>
                <el-button type="primary" @click="saveData">{{$t('message.save')}}</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import mixin from 'common/src/mixins/index'
import {
    getList,
    update,
    deleteData,
    getInfo,
    exportData,
    getReportStatus,
    getCollege
} from 'common/src/api/underGraduationDesign/innerTutor'
import tutorSelect from 'common/src/views/underGraduationDesign/globalSettings/innerTutor/components/TutorSelect'
import tools from 'common/src/views/underGraduationDesign/tools.js';
export default {
    name: 'outTutor',
    mixins: [mixin],
    components: { tutorSelect },
    data() {
        return {
            queryForm: {
                pageNum_: 1,
                pageSize_: 20,
                condition: {
                  code: '',
                  level: '',
                  faculty: '',
                  sex: ''
                }
            },
            defaultFactuly: null,
            clearState: false,
            selectList: [],
            TutorList: [],
            indexKey: '1',
            breadPath: {
                label: '校内导师管理',
                key: '1',
                children: [
                    {
                        key: '2',
                        label: '新增校内导师'
                    }
                ]
            },
            leftTransferData: '',
            rightTransferData: '',
            query: {
                condition: {
                    faculty: null,
                    level: null,
                    name: ''
                }
            },
            source: {
                collegeList: [],
                levelList: [
                    { label: '正高级', value: '正高级' },
                    { label: '副高级', value: '副高级' },
                    { label: '中级', value: '中级' },
                    { label: '初级', value: '初级' }
                ],
              sexes: [
                { label: '男', value: '1' },
                { label: '女', value: '2' }
              ],
            },
            addList: [],
            deleteList: []
        }
    },
    mounted() {
        this.onSubmit();
        this.initDicts();
    },
    methods: {
        initDicts() {
          getCollege().then(res => {
            this.source.collegeList = res;
          });
        },
        onSearchReset() {
          this.queryForm = {
            pageNum_: 1,
            pageSize_: 20,
            condition: {
              code: '',
              level: '',
              faculty: '',
              sex: ''
            }
          };
          this.onSubmit();
        },
        onSearch() {
          this.onSubmit();
        },
        getCollege() {
            getCollege().then(res => {
                var defaultFac = this.global.currentUser.faculty;
                this.source.collegeList = res;
                if (res != null && res.length > 0) {
                    if (defaultFac != null) {
                        this.defaultFactuly = defaultFac;
                    } else {
                        this.defaultFactuly = res[0].collegeId
                    }
                    this.query.condition.faculty = this.defaultFactuly;
                    this.searchTeacher()
                }
            })
        },
        handleSelectionChange(val) {
            this.selectList = val
        },
        onSubmit() {
            getList(this.queryForm).then(res => {
                if (res.code == 200) {
                    this.TutorList = res.data.list
                    this.queryForm.total = res.data.total
                    this.selectList = []
                }
            })
        },
        transSex(sex) {
            if (sex == 1) {
                return '男'
            }
            return '女'
        },
        exportFile() {
            var data = {
                vo: this.queryForm.condition,
                list: this.selectList
            }
            exportData(data).then(res => {
              tools.downloadFile(res.data.key, "校内导师.xls", null, this);
                /*let loading = this.$loading({
                    lock: false,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(255, 255, 255, .48)'
                })
                if (res.code === 200) {
                    this._delayRequest(res.data.key, loading)
                } else {
                    loading.close()
                }*/
            })
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val
            this.onSubmit()
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val
            this.onSubmit()
        },
        async _delayRequest(key, loading) {
            await new Promise(resolve => setTimeout(resolve, 3000))
            getReportStatus(key)
                .then(res => {
                    if (res.code == 200 && res.data.status) {
                        let path = 'api/majorservice/common/export?path=' + res.data.path
                        window.open(path)
                        loading.close()
                    } else {
                        this._delayRequest(key, loading)
                    }
                })
                .catch(ex => {
                    this._delayRequest(key, loading)
                })
        },
        addItem() {
            this.getCollege()
            this.query.condition.level = null;
            this.query.condition.name = "";
            this.addList = []
            this.deleteList = []
            this.indexKey = '2'
        },
        deleteRecord(code) {
            this.$delConfirm().then(() => {
                deleteData(code).then(response => {
                    if (response.code == 200) {
                        this.$message({
                            type: 'success',
                            message: this.$t('common.tips.deleteSuccess')
                        })
                        this.onSubmit()
                    }
                })
            })
        },
        reset() {
            this.query.condition.faculty = this.defaultFactuly;
            this.query.condition.level = null
            this.query.condition.name = ''
            this.searchTeacher()
        },
        searchTeacher() {
            getInfo(this.query.condition).then(res => {
                this.leftTransferData = JSON.stringify(res.addList)
                this.rightTransferData = JSON.stringify(res.deleteList)
            })
        },
        pickAuthorities({ result }) {
            var deleteList = this.deleteList
            for (var index = 0; index < result.addList.length; index++) {
                var isContain = false
                for (var index_y = 0; index_y < deleteList.length; index_y++) {
                    if (result.addList[index].code == deleteList[index_y].code) {
                        isContain = true
                        break
                    }
                }
                if (!isContain) {
                    this.addList.push(result.addList[index])
                }
            }

            if (deleteList.length > 0) {
                for (var index = 0; index < result.addList.length; index++) {
                    for (var index_y = 0; index_y < deleteList.length; index_y++) {
                        if (result.addList[index].code == deleteList[index_y].code) {
                            deleteList.splice(index_y, 1)
                            break
                        }
                    }
                }
            }
            this.deleteList = deleteList
            this.rightTransferData = JSON.stringify(result.rightData)
            this.leftTransferData = JSON.stringify(result.leftData)
        },
        unpickAuthorities({ result }) {
            var addList = this.addList
            for (var index = 0; index < result.deleteList.length; index++) {
                var isContain = false
                for (var index_y = 0; index_y < addList.length; index_y++) {
                    if (result.deleteList[index].code == addList[index_y].code) {
                        isContain = true
                        break
                    }
                }
                if (!isContain) {
                    this.deleteList.push(result.deleteList[index])
                }
            }

            if (addList.length > 0) {
                for (var index = 0; index < result.deleteList.length; index++) {
                    for (var index_y = 0; index_y < addList.length; index_y++) {
                        if (result.deleteList[index].code == addList[index_y].code) {
                            addList.splice(index_y, 1)
                            break
                        }
                    }
                }
            }
            this.addList = addList
            this.rightTransferData = JSON.stringify(result.rightData)
            this.leftTransferData = JSON.stringify(result.leftData)
        },
        resetSelect() {
            var _leftData = JSON.parse(this.leftTransferData)
            for (var index = 0; index < this.addList.length; index++) {
                _leftData.push(this.addList[index])
            }
            var deleteIndex = []
            for (var index = 0; index < this.deleteList.length; index++) {
                for (var index_y = 0; index_y < _leftData.length; index_y++) {
                    if (this.deleteList[index].code == _leftData[index_y].code) {
                        _leftData.splice(index_y, 1)
                        break
                    }
                }
            }
            var _rightData = JSON.parse(this.rightTransferData)
            for (var index = 0; index < this.deleteList.length; index++) {
                _rightData.push(this.deleteList[index])
            }
            for (var index = 0; index < this.addList.length; index++) {
                for (var index_y = 0; index_y < _rightData.length; index_y++) {
                    if (this.addList[index].code == _rightData[index_y].code) {
                        _rightData.splice(index_y, 1)
                        break
                    }
                }
            }
            this.addList = []
            this.deleteList = []
            this.leftTransferData = JSON.stringify(_leftData)
            this.rightTransferData = JSON.stringify(_rightData)
        },
        saveData() {
            var updateData = {
                addList: this.addList,
                deleteList: this.deleteList
            }
            console.info(updateData)
            update(updateData).then(res => {
                if (res.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '保存成功'
                    })
                    this.onSubmit()
                    this.indexKey = '1'
                }
            })
        }
    }
}
</script>
